/*
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-07-13 14:10:56
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-07-15 13:55:37
 * @FilePath: \mygit\实验\邮箱提示\script1.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
var postfixList = ['163.com', 'gmail.com', '126.com', '263.net', 'qq.com']
let lis
let currentIndex = 0
let sugLength = postfixList.length

emailInput.focus()
emailInput.addEventListener('input', function () {
    // 获取用户输入
    const value = getUserInput()
    // 根据用户输入的内容获取提示数据
    const sugList = getSugList(value)
    // 根据提示生成li插入到ul里
    insertSug(sugList)
    // 根据输入框中的内容的有无切换提示框的显示状态
    toggleSugDisplay(value)
})

// 点击选项提示
emailSug.addEventListener('click', function (e) {
    const target = e.target
    if (target.tagName === 'LI') {
        confirmSug(target)
    }
})


// 键盘选择
emailInput.addEventListener('keydown', function (e) {
    if (e.keyCode === 38) {//下
        currentIndex = currentIndex > 0 ? currentIndex - 1 : sugLength - 1
        changeActive()
    } else if (e.keyCode === 40) {//上
        currentIndex = currentIndex < sugLength - 1 ? currentIndex + 1 : 0
        changeActive()
    } else if (e.keyCode === 13) {//回车
        confirmSug(lis[currentIndex])
    } else if (e.keyCode === 27) {//esc
        emailInput.select()
    }
})

// 拿到input输入框的输入内容trim返回，去掉前后空格后的输入框的内容
function getUserInput() {
    return emailInput.value.trim();
}


// 生成输入框的内容，拼接好后缀的数组
function getSugList(value) {
    let suffix = ''
    // 获取用户输入，返回生成的提示内容
    if (value.includes('@')) {
        // 当输入的内容含有@时，选取@前面的字符来和后缀拼接
        const i = value.indexOf('@')
        suffix = value.substring(i + 1)
        value = value.substring(0, i)
    }
    // 获取筛选后的后缀
    const newPostfixList = postfixList.filter(item => {
        return item.includes(suffix)
    })
    let list
    if (newPostfixList.length > 0) {
        // 筛选后的结果
        list = newPostfixList
        sugLength = newPostfixList.length
    } else {
        // 原本的后缀
        list = postfixList
        sugLength = postfixList.length
    }
    // 返回生成的提示内容
    return list.map((item) => {
        // 遍历PostfixList，把用户输入和每一个postfixList进行结合成为每一个Li
        return value + '@' + item
    })
}


// 将内容添加到email-sug-wrapper中
function insertSug(list) {
    // 每次生成数据前清空老数据
    emailSug.innerHTML = ''
    // 获取生成提示框中的内容将内容添加到email-sug-wrapper
    list.forEach((item, index) => {
        const li = document.createElement('li')
        li.innerHTML = item
        if (index === 0) {
            li.className = 'active'
        }
        emailSug.appendChild(li)
    })
    lis = document.querySelectorAll('#email-sug-wrapper li')
}


// 根据输入框中的内容的有无切换提示框的显示状态
function toggleSugDisplay(value) {
    if (value === '') {
        closeSug()
    } else {
        openSug()
    }
}

// 关闭提示框
function closeSug() {
    emailSug.style.display = 'none'
}

// 打开提示框
function openSug() {
    emailSug.style.display = 'block'
}


// 把li对应的提示内容放在输入框中，同时隐藏提示框
function confirmSug(ele) {
    emailInput.value = ele.innerHTML
    closeSug()
    currentIndex = 0
    emailInput.focus()
}



// 切换激活li
function changeActive() {
    // 先清空
    for (let i = 0; i < lis.length; i++) {
        lis[i].className = ''
    }
    // 给对应索引的li加active
    // console.log(lis);
    lis[currentIndex].className = 'active'
}
